<template>
  <el-table
    :data="data"
    v-on="events"
    v-bind="configData">
    <el-table-column v-for="(column, i) in columnsData" v-bind="column" :key="'cl-table-' + i">
      <template
        :slot="column.identifier || column.clickable || column.options ? 'default' : 'abandoned'"
        v-if="column.identifier || column.clickable || column.options"
        slot-scope="scope">
        <slot :name="column.identifier" v-bind="scope">
          <span class="link" v-if="column.clickable" @click="column.onClick(scope)">{{ scope.row[column.prop] }}</span>
          <el-popover
            v-if="column.options"
            popper-class="pop-style"
            placement="right"
            trigger="hover"
            width='auto'>
            <div class="popper">
              <div class="item" v-for="(o, i) in column.options" v-show="!o.show || o.show(scope)"
                   @click="o.click(scope)" :key="o.name + i">{{ o.name }}
              </div>
            </div>
            <div slot="reference">
              <img style="width: 2px; margin-top: 2px" src="../assets/image/more-actions.png" alt="">
            </div>
          </el-popover>
        </slot>
      </template>
      <template
        :slot="column.headerIdentifier ? 'header' : 'abandoned'"
        v-if="column.headerIdentifier"
        slot-scope="scope">
        <slot :name="column.headerIdentifier" v-bind="scope"></slot>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'ClTable',
  props: {
    data: Array,
    config: Object,
    events: Object,
    columns: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      configData: {
        height: '100%',
        border: true,
        headerCellClassName: 'cl-table-header',
        cellClassName: 'cl-table-cell'
      },
      columnsData: []
    }
  },
  created() {
    this.configData = Object.assign(this.configData, this.config)
    Object.keys(this.configData).forEach(k => {
      if (typeof this.configData[k] === 'function') {
        this.configData[k] = this.configData[k]()
      }
    })
    this.columnsData = this.columns
    this.columnsData.forEach(c => {
      Object.keys(c).forEach(k => {
        if (typeof c[k] === 'function') {
          c[k] = c[k]()
        }
      })
    })
  }
}
</script>

<style lang="less">
  .el-popover.pop-style {
    padding: 0;
  }
</style>
<style lang="less" scoped>
  .pop-style {
    .popper {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 0 15px;
      border-radius: 5px;
      box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);

      .item {
        text-align: center;
        line-height: 40px;
        width: 100%;
        height: 40px;
        cursor: pointer;
        border-bottom: 1px solid rgba(151, 151, 151, 0.11);
        font-size: 12px;

        &:hover {
          color: #007AFF;
        }

        &:last-child {
          border-bottom: none;
        }
      }
    }
  }
</style>
